<template>
	<div class="login-content">
		<div class="font">
			<div class="sup"><p>Man</p></div>
			<div class="sub">漫时光</div>
		</div>
		<div class="body">
			<div class="line">
				<input type="text" v-model="loginObj.id" placeholder="请输入账号" />
			</div>
			<div class="line">
				<input type="password" v-model="loginObj.password" placeholder="请输入密码" />
			</div>
            <span @click="toReg" class="reg">点击注册>></span>
			<div class="check">
				<van-checkbox v-model="remember" checked-color="#002c8c">是否记住密码？</van-checkbox>
				<van-checkbox v-model="auto" checked-color="#002c8c">是否免登录？</van-checkbox>
			</div>
			<div class="btn">
                <van-button round block type="primary" @click="getCodeEvt">登录</van-button>
            </div>
		</div>
        <div class="image">

        </div>
		<div class="right">微星科技 技术支持 &copy;2023-</div>
	</div>
</template>

<script setup>
import { onMounted,reactive, ref } from 'vue'	
import { Toast} from 'vant'
import { useRouter } from 'vue-router'
import { getLogin } from '../../api/Hu'
import {MD5} from 'crypto-js'
import {useCounterStore} from '../../stores/users'

const store = useCounterStore()
const router=useRouter()
const remember = ref(false)
const auto = ref(false)
const loginObj=reactive({
    "id":'',
    "password":''
})


onMounted(function(){
	let userinfo=JSON.parse(localStorage.getItem('user')||'{}')
	if(userinfo){
		loginObj.id=userinfo.id
		loginObj.password=userinfo.password
		remember.value=true
	}
	if(!localStorage.getItem('user')){
		remember.value=false
	}
	if(localStorage.getItem('autologin')){
		router.push('/home')
		// console.log(123);
	}
})
function Md5Code(msg){
	return MD5(msg).toString()
}
async function getCodeEvt(){
    if (!loginObj.id || !loginObj.password) {

        Toast({
            message: '请输入完整信息',
            position: 'bottom'
        })
    }else{
			const Add=await getLogin(loginObj.id,Md5Code(loginObj.password))			
				if(Add.code===200){
					Toast({
						message: '登录成功',
						position: 'bottom'
					})
					localStorage.setItem('TOKEN',Add.data.token)
					store.setUserInfo(Add.data)
					// console.log(Add.data)

					if(remember.value){
						localStorage.setItem('user',JSON.stringify(loginObj))
						remember.value=true	
					}else{
						localStorage.removeItem('user')
					}
					if(auto.value)	{
							localStorage.setItem('autologin','通过')
						}
					router.push('/home')
				}else{
					Toast({
						message: '登录失败，请检查账户密码是否正确',
						position: 'bottom'
					})
				}
				
		
	}
	// console.log(remember);
	// auto.value=true

}


function toReg(){
    router.push('/Reg')
}

</script>

<style lang="scss">
@import '../../styles/index.scss';
.login-content {
	display: block;
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: $g08;
   
	
    > .image{
            width: 100vw;
            height: 100vh;
            background: url('../../../image/j.png') no-repeat;
            background-size: 100%;
        }
	> .font {
		color: $g09;
		position: absolute;
		top: 80px;
		right: calc(50% - 84px);

		> .sup {
			width: 60px;
			height: 30px;
			font-size: 0.3rem;
			border-radius: 25px;
			display: flex;
			align-items: center;
			padding-left: 8px;
			margin-bottom: 8px;
		}
		> .sub {
			font-size: 1.5rem;
		}
	}

	> .body {
		position: absolute;
		top: 220px;
		width: 100%;
       >.reg{
        color: red;
        font-size: 16px;
        font-weight: 900;
        margin-left: 245px;
    }
		> .line {
			font-size: 0.4rem;
			display: flex;
			padding: 10px 0 10px 20px;
			border-bottom: 1px solid $g03;
            margin-left: 20px;
            margin-right: 20px;
			> input {
				flex: 1;
				width: 0;
				border: none;
				line-height: 30px;
				background-color: transparent;
				outline: none;
				height: 30px;
                
			}
			> span {
				flex: 0 0 140px;
				width: 0;
				text-align: center;
				line-height: 30px;
				border-left: 1px solid $g03;
			}
		}
		> .check {
			height: 80px;
			font-size: 0.4rem;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
            padding: 0 20px;
		}
        > .btn{
            margin-left: 20px;
            margin-right: 20px;
        }
      
	}
	
	> .right {
		width: 100vw;
		display: block;
		position: absolute;
		bottom: 12px;
		left: 0;
		font-size: 0.3rem;
		text-align: center;
	}
}
</style>